import platform = require('../../../../platform/common/baseCommon');
import appClient = require('../../../../platform/client/appClient');
import platformControls = require('../../../../platform/client/controls');
import report = require('../../../../platform/client/report');


let moduleName = "platform.client";


@platform.addon("表格样例", "表格数据显示器", moduleName)
@appClient.template(`<table name="table">
<thead name="theader"></thead><tbody name="tbody"></tbody>
</table><div class="text-center"></div>`)
export class testGridDataDisplayer extends report.baseDataDisplayer implements report.dataQueryer {
    /** 表格 */
    $table?: JQuery = undefined;
    /** 表格标题 */
    $theader?: JQuery = undefined;
    /** 表格数据 */
    $tbody?: JQuery = undefined;
    $previous?: JQuery = undefined;
    $next?: JQuery = undefined;
    /**
     * 关联数据源名称列表
     */
    dataSourceNames?: string[];
    /** 过滤的字段列表 */
    filtFields?: string[];
    private thead?: boolean = false;

    /**
    * 提示框(dialog)
    */
    private myDialog?: platformControls.dialog = undefined;

    /**
     * 清除数据
     */
    clearData?(): void {

    }
    /**
     * 准备数据格式
     */
    prepareDataSchema?(columns: platform.dataColumn[]): void {
        if (columns) {
            let tr = $(`<tr></tr>`);
            for (let key in columns) {
                if (key == platform.proto) continue;
                if (key == "RN") continue;
                if (this.filtFields
                    && this.filtFields.indexOf(key) > -1) continue;
                let column = columns[key];
                let title = column.caption ? column.caption : column.name;
                let th = $(`<th>${title}</th>`);
                th.appendTo(tr);
            }
            tr.appendTo(this.$theader);
            this.thead = true;
        }
    }
    /**
     * 查询
     */
    query?() {

    }
    /**
     * 事件:执行查询
     */
    doQuery?: (dataSourceName: string, paramValues: any[string], startIndex: number, maxCount: number) => void;
    /**
     * 自动查询时间间隔（单位：毫秒），如果大于零，表示自动执行；如果小于等于0，表示手动执行
     */
    autoQueryInterval?: number;

    /**
     * 设置数据
     * @param data 数据
     */
    setData?(data: platform.dataTable): void {
        let columnsTitle = []; // 列标题
        if (data.columns) {
            let columns = data.columns;
            for (let key in columns) {
                if (key == platform.proto) continue;
                if (key == "RN") continue;
                if (this.filtFields
                    && this.filtFields.indexOf(key) > -1) continue;
                let column = columns[key];
                let title = column.caption ? column.caption : column.name;
                columnsTitle.push({
                    field: title,
                    title: title
                });
            }
        }
        let rowsData = []; // 行数据
        if (data.rows.length > 0) {
            for (let row of data.rows) {
                let fieldValues = {};
                for (let key in row.rowValues) {
                    if (key == platform.proto) continue;
                    if (key == "RN") continue;
                    if (this.filtFields
                        && this.filtFields.indexOf(key) > -1) continue;
                    fieldValues[key] = row.rowValues[key] != null ? row.rowValues[key] : "";
                }
                rowsData.push(fieldValues);
            }
        }

        let that = this;
        // 初始化表格，注意：该方法只会起作用一次
        that.$table.bootstrapTable({
            height: 300,
            clickToSelect: true,
            onClickRow: function (row, $element) { // 行点击事件，修改Demo
                if (that.myDialog == null) {
                    that.myDialog = new platformControls.dialog();
                    that.myDialog.appendTo(that.element);
                }
                that.myDialog.onDialogSubmitClick = () => {
                    that.$table.bootstrapTable('updateRow', { index: $element[0].rowIndex - 1, row: { ID: $('#my-input-id').val(), NAME: $('#my-input-name').val(), DISABLE_TAG: $('#dropdownMenu1').text().trim() == '是' ? 1 : 0 } });
                };
                that.myDialog.show('修改', `<div class="input-group">
                         <p class="input-group-addon">序号</p><input id="my-input-id" class="form-control" type="text" value="${row.ID}"/>
                     </div>
                     <div class="input-group">
                         <p class="input-group-addon">名称</p><input id="my-input-name" class="form-control" type="text" value="${row.NAME}"/>
                     </div>
                     <div class="input-group">
                         <p class="input-group-addon">启用</p>
                         <div class="dropdown" id="myDropdown">
                             <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">${row.DISABLE_TAG == 0 ? '否' : '是'} 
                                 <span class="caret"></span>
                             </button>
                             <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                 <li role="presentation">
                                     <a role="menuitem" tabindex="-1" href="#">是</a>
                                 </li>
                                 <li role="presentation">
                                     <a role="menuitem" tabindex="-1" href="#">否</a>
                                 </li>
                             </ul>
                         </div>
                     </div>`);
                $('#myDropdown ul li').click(function () {
                    $('#dropdownMenu1').html($(this).text() + '<span class="caret"></span>');
                });
            },
            columns: columnsTitle
            //data: rowsData
        });
        that.$table.bootstrapTable('load', rowsData); // 加载数据
    }
}